<template>
  <div>
    <el-page-header @back="goBack" :content="this.id?'编辑课程':'新增课程'">
    </el-page-header>
    <el-card>
      <div slot="header" class="clearfix">
        <el-steps :active="step" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="销售信息"></el-step>
          <el-step title="秒杀活动"></el-step>
          <el-step title="课程详情"></el-step>
        </el-steps>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <div v-show="step == 1">
          <el-form-item label="名称">
            <el-input type="text" placeholder="请输入内容" v-model="form.courseName"
              maxlength="50" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="text" placeholder="请输入简介" v-model="form.brief"
              maxlength="100" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="讲师姓名">
            <el-input type="text" placeholder="讲师姓名" v-model="form.teacherDTO.teacherName"
              maxlength="50" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input type="text" placeholder="请输入职位" v-model="form.teacherDTO.position"
              maxlength="100" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="讲师简介">
            <el-input type="text" placeholder="请输入内容" v-model="form.teacherDTO.description"
              maxlength="100" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="课程概述" class="content">
            <el-col :span="11">
              <el-form-item>
                <el-input type="text" placeholder="请输入内容" v-model="form.previewFirstField"
                  maxlength="100" show-word-limit>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item>
                <el-input type="text" placeholder="请输入内容" v-model="form.previewSecondField"
                  maxlength="100" show-word-limit>
                </el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="课程封面" prop="courseListImg">
            <file-upload v-model="form.courseListImg"
            :title="'建议尺寸：230*300px，JPG、PNG格式，图片小于150K'"></file-upload>
          </el-form-item>
          <el-form-item label="解锁封面" prop="courseImgUrl">
            <file-upload v-model="form.courseImgUrl"
            :title="'建议尺寸：750*422px，JPG、PNG格式，图片小于150K'"></file-upload>
          </el-form-item>
          <el-form-item label="课程排序">
            <el-input placeholder="请输入内容" v-model="form.sortNum" type="number" :min="0">
              <template slot="append">数字控制排序，数字越大越靠后</template>
            </el-input>
          </el-form-item>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div v-show="step == 2">
          <el-form-item label="售卖价格" required>
            <el-input placeholder="请输入内容" v-model="form.discounts" type="number" :min="0">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品原价">
            <el-input placeholder="请输入内容" v-model="form.price" type="number" :min="0">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input placeholder="请输入内容" v-model="form.sales" type="number" :min="0">
              <template slot="append">单</template>
            </el-input>
          </el-form-item>
          <el-form-item label="活动标签">
            <el-input type="text" placeholder="请输入内容" v-model="form.discountsTag"
              maxlength="4" show-word-limit>
            </el-input>
          </el-form-item>
          <el-button style="margin-top: 12px;" @click="previous">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div v-show="step == 3">
          <el-form-item label="秒杀开关" width="250">
            <el-switch
              v-model="form.activityCourse"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <div v-if="form.activityCourse">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="form.activityCourseDTO.beginTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="form.activityCourseDTO.endTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="秒杀价">
              <el-input placeholder="请输入内容"
              v-model="form.activityCourseDTO.amount" type="number" :min="0">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="秒杀库存">
              <el-input placeholder="请输入内容"
              v-model="form.activityCourseDTO.stock" type="number" :min="0">
                <template slot="append">单</template>
              </el-input>
            </el-form-item>
          </div>
          <el-button style="margin-top: 12px;" @click="previous">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div v-show="step == 4">
          <el-form-item label="课程详情">
            <wang-editor v-model="form.courseDescriptionMarkDown"></wang-editor>
          </el-form-item>
          <el-button style="margin-top: 12px;" @click="previous">上一步</el-button>
          <el-button style="margin-top: 12px;" type="info" @click="handleSave">提交</el-button>
        </div>
      </el-form>
    </el-card>

  </div>
</template>
<script>
// eslint-disable-next-line
import { UpdateCourse,getCourseById } from '@/services/course';
import WangEditor from '@/components/WangEditor.vue';
import FileUpload from './components/FileUpload.vue';

export default {
  name: 'CourseEdit',
  props: ['id'],
  components: {
    FileUpload, WangEditor,
  },
  created() {
    if (this.id) {
      this.loadCourseInfo();
    }
  },
  data() {
    return {
      step: 1,
      form: {
        courseName: '',
        brief: '',
        teacherDTO: {
          teacherName: '',
          position: '',
          description: '',
        },
        previewFirstField: '',
        previewSecondField: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: 0,
        discounts: 0,
        price: 0,
        sales: 0,
        discountsTag: '',
        activityCourse: false,
        activityCourseDTO: {
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0,
        },
        courseDescriptionMarkDown: '',
      },

    };
  },
  methods: {
    async loadCourseInfo() {
      const { data } = await getCourseById({ courseId: this.id });
      if (data.code === '000000') {
        this.form = data.data;
        if (!this.form.activityCourse) {
          this.form.activityCourseDTO = {
            beginTime: '',
            endTime: '',
            amount: 0,
            stock: 0,
          };
        }
      }
    },
    goBack() {
      this.$router.push({ name: 'lesson' });
    },
    next() {
      this.step += 1;
    },
    previous() {
      this.step -= 1;
    },
    async handleSave() {
      const { data } = await UpdateCourse(this.form);
      if (data.code === '000000') {
        this.$message.success('课程信息更新成功');
        this.$router.push({ name: 'lesson' });
      } else {
        this.$message.error('课程信息更新失败');
      }
    },
  },
};
</script>

<style scoped>
.el-page-header {
  margin-bottom: 20px;
}
.content .el-col{
  margin-right: 20px;
}
</style>
